@use "../variables" as *;

.svc-context-container {
  display: flex;
  gap: calcSize(1);
  width: max-content;
}

.svc-context-button {
  display: flex;
  box-sizing: border-box;
  background-color: var(--ctr-survey-contextual-button-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  border-radius: var(--ctr-survey-contextual-button-corner-radius, var(--lbr-corner-radius-round));
  width: var(--ctr-survey-contextual-button-width, var(--lbr-size-x6));
  height: var(--ctr-survey-contextual-button-height, var(--lbr-size-x6));
  padding: var(--ctr-survey-contextual-button-padding-top, var(--lbr-spacing-x150))
    var(--ctr-survey-contextual-button-padding-right, var(--lbr-spacing-x150))
    var(--ctr-survey-contextual-button-padding-bottom, var(--lbr-spacing-x150))
    var(--ctr-survey-contextual-button-padding-left, var(--lbr-spacing-x150));

  cursor: pointer;
  outline: none;

  .sv-svg-icon {
    --thm-button-contextual-button-icon-width: calc(
      var(--ctr-survey-contextual-button-width, var(--lbr-size-x6)) - var(--ctr-survey-contextual-button-padding-right, var(--lbr-spacing-x150)) -
        var(--ctr-survey-contextual-button-padding-left, var(--lbr-spacing-x150))
    );
    --thm-button-contextual-button-icon-height: calc(
      var(--ctr-survey-contextual-button-height, var(--lbr-size-x6)) - var(--ctr-survey-contextual-button-padding-top, var(--lbr-spacing-x150)) -
        var(--ctr-survey-contextual-button-padding-bottom, var(--lbr-spacing-x150))
    );
    width: var(--thm-button-contextual-button-icon-width, calcSize(3));
    height: var(--thm-button-contextual-button-icon-height, calcSize(3));
  }

  use {
    fill: var(--ctr-survey-contextual-button-icon-color, var(--sjs-layer-1-foreground-50, #00000080));
    transition: fill $creator-transition-duration;
  }
}

.svc-context-button {

  &:hover,
  &:focus {
    use {
      fill: var(--ctr-survey-contextual-button-icon-color-positive, var(--sjs-primary-background-500, #19b394ff));
    }
  }
}

.svc-context-button--danger {

  &:hover,
  &:focus {
    use {
      fill: var(--ctr-survey-contextual-button-icon-color-negative, var(--sjs-semantic-red-background-500, #e50a3eff));
    }
  }
}